import {
    reqUserList,
    reqLogout,
    reqDelUser
} from '../../api'
import {
    getKey,
    getUser,
    removeToken,
    removeUser,
    saveKey
} from '../../utils/storageUtils'
import render from './index.art'


async function getUsers(page) {
    saveKey(page)
    // 每页4条数据
    const limit = 4
    // 请求获取指定页码的分页数据
    const result = await reqUserList(page, limit)
    const {
        data: users,
        total
    } = result.data

    // 算出页码数
    const pageCount = Math.ceil(total / limit)

    // 得到登录用户的用户名
    const {
        username
    } = getUser()

    // 渲染模版,生成html
    const html = render({
        users,
        page,
        pageCount,
        total,
        username
    })
    if (page === pageCount && total % limit === 1) {
        saveKey(page - 1)
    }

    // 插入页面中
    document.getElementById('app').innerHTML = html

    // 退出登录
    handleClickLogout()

    // 点击按钮删除用户
    handleDelUser()
}

// 添加到window上---让模板可以直接调用
window.getUsers = getUsers
// 初始获取第一页显示
saveKey(1)
getUsers(getKey() * 1)

function handleClickLogout() {
    document.getElementById('logout').onclick = async () => {
        // 请求退出接口
        await reqLogout()
        removeToken()
        removeUser()
        // 成功后, 跳转到登陆页面
        window.location = '/login.html'
    }
}

// 点击删除用户
function handleDelUser() {
    document.getElementsByName('btnDel').forEach(btn => {
        btn.onclick = async (e) => {
            const {
                username,
                id
            } = e.target.dataset
            const result = await reqDelUser(id)
            if (result.code == 200) {
                getUsers(getKey() * 1)
            }
        }
    })
}